<!DOCTYPE html>
<html lang="zh-CN" style="overflow: hidden;" xmlns:th="http://www.thymeleaf.org">
    <head>
        <div th:replace="layout/styles ::header"></div>
        <style type="text/css">
            #hzy-login {
                background: #f0f2f5 url(/hzyAdminUI/images/login-bg.svg) no-repeat 50%;
            }
        </style>
    </head>
    <body>
        <div id="hzy-login">

            <div class="container-fluid" id="app">
                <div class="row">
                    <div class="login-panel shadow-lg">
                        <h1 class="text-center">HZY.Admin</h1>
                        <div class="container-fluid">
                            <div class="pt-50">
                                <div class="form-group form-material">
                                    <label class="col-form-label">帐户名</label>
                                    <input type="text" class="form-control" v-model="accountName" placeholder="请输入帐户名">
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label">密码</label>
                                    <input type="text" class="form-control" v-model="password" placeholder="请输入密码">
                                </div>
                                <div class="form-group form-material">
                                    <label class="col-form-label">验证码</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" name="loginCode" placeholder="请输入验证码">
                                        <div class="input-group-append">
                                            <img class="yzm" src="http://www.suiyu.org.cn/Admin/Login/yzm"
                                                 onclick="$(this).attr('src','http://www.suiyu.org.cn/Admin/Login/yzm'+'/'+new Date().getTime());"
                                                 width="100" style="height: 29px; border-bottom: 1px solid #e4eaec;">
                                        </div>
                                    </div>
                                </div>
                                <a class="btn btn-block btn-primary btn-lg mt-60" href="javascript:;"
                                   @click="check">登录</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--js 脚本-->
        <th:block th:replace="layout/scripts ::scripts"></th:block>
        <script type="text/javascript">
            var app = new Vue({
                el: "#hzy-login",
                data: function () {
                    return {
                        accountName: 'admin',
                        password: '123456'
                    };
                },
                mounted: function () {

                },
                methods: {
                    check: function () {
                        hzyAdmin.post('/login/check', {
                            accountName: this.accountName,
                            password: this.password,
                            // LoginCode: this.LoginCode
                        }, function (r) {
                            if (r.status != 1) return;
                            var key = `Authorization_${window.location.hostname}_${window.location.port}`;
                            hzyAdmin.setCookie(key, r.data.token);
                            window.location = '/';
                        });
                    }
                }
            });
        </script>
    </body>

</html>